@light-blue: #D5DBE1;
@dark-blue: #8E9DAC;
@medium-blue: #A3B3BF;

@padding-horiz: 10px;

@inspector-width: 300px;
@inspector-height: 30px;

@font-stack: Avenir, Helvetica Neue, Helvetica, Arial;

@light-weight: 300;
@medium-weight: 500;
@demibold-weight: 600;

@import 'http://idl.cs.washington.edu/static/style/fonts.css';

body {
  font-family: @font-stack;
  background: #eee;
}

h2 {
  padding: @padding-horiz/2 @padding-horiz;
  color: #ffffff;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: @light-weight;
  background: @dark-blue;
  margin-bottom: @padding-horiz*2;
}

h3 {
  display: block;
//  height: @inspector-height;
  padding: @padding-horiz @padding-horiz;
  font-size: 16px;
  font-weight: @demibold-weight;

  span {
    display: inline-block;
    width: 245px;
    cursor: pointer;
  }

  a.delete { visibility: hidden; }
}

.clickable{
  cursor:pointer;
}

h3 span:focus, .editVal:focus {
  -moz-user-select: -moz-text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;

  background-color: white !important;
  border: 1px solid darkgray !important;
  box-shadow: 1px 1px 1px 0 lightgray inset;

  padding: 5px;
}

h3.selected  {
    background-color: @medium-blue;
    border: 1px solid @medium-blue;

    a.delete { visibility: visible; }
}

h3:hover { 
  span:hover { color: #666; }

  a.delete { visibility: visible}
}
h3.selected:hover { color: #000; }

.heading {
  display: block;
  padding: 7px @padding-horiz;
  margin: 10px 0;

  background: rgb(193, 198, 206);
  font-size: 14px;

  select, input { margin: 0 }
  .close { margin-top: -3px; }
}

.subheading {
  font-size: 12px;
  font-weight: 500;
  color: @dark-blue;
  text-transform: uppercase;
  margin: 1.5*@padding-horiz 0;
  padding-bottom: @padding-horiz/2;
  border-bottom: 1px solid @dark-blue;
  clear: both;
}

h4 { .subheading }

h5 {
  .subheading;
  border-bottom: 0;
  font-size: 10px;
  padding-left: @padding-horiz;
  margin: @padding-horiz/2 0;

  .close {
    color: @dark-blue;
    opacity: 0.7;
    margin: -4px @padding-horiz 0 0;
  }
}

.addNew {
  display: block;
  margin: 2*@padding-horiz 0;
  cursor: pointer;

  font-size: 14px;
  font-weight: @light-weight;
  text-transform: uppercase;
  text-align: center;
  color: @dark-blue;
}

.addNew:hover { color: #333; }

.inner { padding: 0 @padding-horiz; }


.scale-values{
 margin-top: -12px; 
 div.block{
   display: block;
   line-height: 23px;

   input[type=color]{height: 23px;}
 }
}

.scale-values .unbind{
  display: inline-block;
  width: 14px;
  height: 14px;
  text-indent: -9999em;
  margin: 3px;
}

.canDropField {
  display: inline-block;
  width: 14px;
  height: 14px;
  text-indent: -9999em;
  opacity: 0.5;
  background: #A3B3BF;
  border-radius: 14px;
}

.canDropField.left  { float: left; }
.canDropField.right { float: right; }
.canDropField.dragging, .helper .canDropField {
  background: cyan;
  opacity: 0.3;
}
.drophover .canDropField {
  background: lightsalmon;
  opacity: 0.5;
}

.canDropField.unbind, .scale-values .unbind {
  background-color: transparent;
  background-image: url(../imgs/remove-black.png);
  background-size: 14px;
  cursor: pointer;

  &:hover {
    background-color: transparent;
    background-image: url(../imgs/remove-white.png);
  }
}


h3.editable-header, #groups-list h3.editable-header{
  span.title{
    width:auto;
    &[contenteditable=true]{
      margin: -6px;
    }
  }

  .rename{
    display: inline-block;
    visibility: hidden;
    width: 12px;
    height: 12px;
    cursor: pointer;
    text-indent: -999em;
    color: transparent;
    padding: 3px;
  }
  &:hover .rename{
    visibility: visible;
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: center center;
    background-image: url(../imgs/pencil-black-left.png);
    opacity: 0.5;

    &:hover { opacity: 1; }
  }
}

@import 'reset.css';
@import 'inspectors';
@import 'binding';
@import 'pipelines-list';
@import 'groups-list';
@import 'center';
@import 'popover';